import Vue from 'Vue'

const app = function () {

    new Vue({
        el: "#app-1",
        data() {
            return {
                text: ''
            }
        },
        components: {
            'component-1': {
                template: '<input type="text">'
            }
        }
    })

    new Vue({
        el: '#app-2',
        data() {
            return {
                text_1: '',
                text_2: ''
            }
        },
        components: {
            'component-2-1': {
                template: '<input type="text" v-bind:value="value" v-on:input="eventHandler">',
                props: ['value'],
                methods: {
                    eventHandler: function (event) {
                        this.$emit('input', event.target.value)
                    }
                }
            },
            'component-2-2': {
                template: '<input type="text" v-bind:value="value" v-on="eventDict">',
                props: ['value'],
                computed: {
                    eventDict: function () {
                        return { input: event => this.$emit('input', event.target.value) }
                    }
                }
            }
        }
    })

    new Vue({
        el: '#app-3',
        data(){
            return {
                foo:'foo',
                bar:'bar'
            }
        },
        components:{
            'component-3':{
                props:['foo'],
                template:'<span>{{foo}}</span>',
                inheritAttrs:false
            }
        }
    })

    new Vue({
        el: '#app-4',
        data() {
            return {
                firstData: 'firstData',
                secondData: 'secondData',
                thirdData: 'thirdData',
                fourthData: 'fourthData'
            }
        },
        methods: {
            firstEvent: function () {
                console.log('第一层组件触发的事件')
            },
            secondEvent: function () {
                console.log('第二层组件触发的事件')
            },
            thirdEvent:function(){
                console.log('第三层组件触发的事件')
            },
            fourthEvent:function(){
                console.log('第四层组件触发的事件')
            }
        },
        components: {
            'first': {
                'props': ['firstData'],
                template: '<div><h1>{{firstData}}</h1><second v-bind="$attrs" v-on="$listeners"></second></div>',
                mounted() {
                    this.$emit('first');
                },
                inheritAttrs:false,
                components:{
                    'second':{
                        'props':['secondData'],
                        template:'<div><h2>{{secondData}}</h2><third v-bind="$attrs" @fourth="eventHandler" v-on="$listeners"></third></div>',
                        mounted() {
                            this.$emit('second');
                        },
                        methods: {
                            eventHandler(payload){
                                $(this.$el).find('h2').after('<span>' + payload + '</span>')
                            }
                        },
                        inheritAttrs:false,
                        components:{
                            'third':{
                                'props':['thirdData'],
                                template:'<div><h3>{{thirdData}}</h3><fourth v-bind="$attrs" @fourth="eventHandler" v-on="$listeners"></fourth></div>',
                                mounted() {
                                    this.$emit('third');
                                },
                                methods: {
                                    eventHandler(payload){
                                        $(this.$el).find('h3').after('<span>' + payload + '</span>')
                                    }
                                },
                                inheritAttrs:false,
                                components:{
                                    'fourth':{
                                        'props':['fourthData'],
                                        template:'<div style="background: #9FEF4E;"><h4>{{fourthData}}</h4></div>',
                                        mounted() {
                                            this.$emit('fourth','负载在第四层上事件上的数据');
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    })
}


export { app }